<template>
  <div class="header">
    <sider-trigger :collapsed="collapsed" @on-change="handleCollapsedChange"></sider-trigger>
    <custom-bread-crumb></custom-bread-crumb>
    <user></user>
  </div>
</template>

<script>
import SiderTrigger from './SiderTrigger'
import CustomBreadCrumb from './CustomBreadCrumb'
import User from './User'

export default {
  name: 'Header',
  components: {
    SiderTrigger, CustomBreadCrumb, User
  },
  props: {
    collapsed: Boolean
  },
  methods: {
    handleCollapsedChange (state) {
      this.$emit('on-sider-change', state)
    }
  }
}
</script>

<style scoped>
.header {
  padding: 0 20px;
  width: 100%;
  height: 64px;
  line-height: 64px;
  flex: 0 0 auto;
  background-color: #fff;
  float: right;
}

.el-dropdown{
  margin-right: 10px;
}
</style>
